/* 页面切换  */
.md-enter-active,
.md-leave-active {
	transition: 0.6s ease-in-out;
	position: absolute;
	top: 0;
	width: 100%;
}
.md-enter-active {
	left: 100%;
}
.md-leave-active {
	left: 0;
}
.md-enter {
	left: 100%;
}
.md-enter-to,
.md-leave {
	left: 0;
}
.md-leave-to {
	left: -100%;
}

/* 消息对象过渡效果 */
@keyframes messageboxitem {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
.messageboxitem-enter-active {
	animation: messageboxitem 30ms;
}

/* 选择功能过渡 */
.md1-enter-active {
	animation: md1-enter 0.25s ease-in-out;
}

.md1-leave-active {
	animation: md1-leave 0.25s ease-in-out;
}

@keyframes md1-enter {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0px);
	}
}
@keyframes md1-leave {
	from {
		transform: translateX(0px);
	}
	to {
		transform: translateX(100%);
	}
}

/* 遮罩层过度 */
.mask-enter-active {
	animation: mask 0.3s;
}

.mask-leave-active {
	animation: mask 0.3s reverse;
}

@keyframes mask {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.drawer-enter-active {
	animation: drawer 0.3s;
}

.drawer-leave-active {
	animation: drawer 0.3s reverse;
}

@keyframes drawer {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}
